<template>
  <div class="performance-edit">
    <a-card :title="`编辑绩效 - ${formState.employeeName || ''}`">
      <template #extra>
        <a-button @click="goBack">取消</a-button>
      </template>

      <a-form
          :model="formState"
          :rules="formRules"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 14 }"
          @finish="handleSubmit"
      >
        <a-form-item label="员工姓名" name="employeeName">
          <a-input v-model:value="formState.employeeName" disabled />
        </a-form-item>

        <a-form-item label="工号" name="employeeId">
          <a-input v-model:value="formState.employeeId" disabled />
        </a-form-item>

        <a-form-item label="考核类型" name="type">
          <a-select v-model:value="formState.type" placeholder="请选择考核类型">
            <a-select-option v-for="item in performanceTypes" :key="item.value" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="考核周期" name="period">
          <a-input v-model:value="formState.period" />
        </a-form-item>

        <a-form-item label="评分" name="score">
          <a-rate v-model:value="formState.score" />
        </a-form-item>

        <a-form-item label="考核人" name="reviewer">
          <a-input v-model:value="formState.reviewer" />
        </a-form-item>

        <a-form-item label="考核日期" name="reviewDate">
          <a-date-picker
              v-model:value="formState.reviewDate"
              style="width: 100%"
              value-format="YYYY-MM-DD"
          />
        </a-form-item>

        <a-form-item label="考核评语" name="comment">
          <a-textarea v-model:value="formState.comment" :rows="4" />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" html-type="submit" :loading="loading">保存</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { getPerformanceDetail, updatePerformance, getMockPerformanceTypes } from '@/api/performance'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const performanceTypes = ref([])

// 表单数据
const formState = reactive({
  id: '',
  employeeName: '',
  employeeId: '',
  type: undefined,
  period: '',
  score: 3,
  reviewer: '',
  reviewDate: '',
  comment: ''
})

// 表单验证规则
const formRules = {
  type: [{ required: true, message: '请选择考核类型' }],
  period: [{ required: true, message: '请输入考核周期' }],
  reviewer: [{ required: true, message: '请输入考核人' }],
  reviewDate: [{ required: true, message: '请选择考核日期' }]
}

// 获取绩效详情
const fetchPerformanceDetail = async () => {
  try {
    const res = await getPerformanceDetail(route.params.id)
    Object.assign(formState, res.data)
  } catch (error) {
    message.error('获取绩效详情失败')
    console.error(error)
  }
}

// 获取绩效类型
const fetchPerformanceTypes = async () => {
  try {
    const res = await getMockPerformanceTypes()
    performanceTypes.value = res.data
  } catch (error) {
    console.error('获取绩效类型失败', error)
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    loading.value = true
    await updatePerformance(formState)
    message.success('绩效记录更新成功')
    router.push(`/performance/detail/${route.params.id}`)
  } catch (error) {
    message.error('更新失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 重置表单
const resetForm = () => {
  fetchPerformanceDetail()
}

// 返回
const goBack = () => {
  router.push(`/performance/detail/${route.params.id}`)
}

onMounted(() => {
  fetchPerformanceDetail()
  fetchPerformanceTypes()
})
</script>

<style scoped>
.performance-edit {
  padding: 20px;
}
</style>